<template>
	<a-card :bordered="false">
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:scroll="{ x: 1500, y: 500 }"
		>
			<template #operator>
				<a-space>
					<a-button type="primary" @click="formRef.onOpen(0)">
						<template #icon><plus-outlined /></template>
						上传文件
					</a-button>
					<a-button type="primary" @click="formRef.onOpen(1)">
						<template #icon><plus-outlined /></template>
						上传地址
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'create_time'">
					{{ dayjs(record.create_time).format('YYYY-MM-DD') }}
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="downUrl(record)" v-if="record.type == 0">下载</a>
						<a @click="openNew(record)">预览</a>
						<a @click="formRef.onOpen(record)">编辑</a>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="tableRef.refresh()" />
</template>

<script setup name="orderList">
	import Form from './form.vue'
	import dayjs from 'dayjs'
	import api from './api'

	const searchFormState = ref({
		username: ''
	})
	const formRef = ref()
	const searchFormRef = ref()
	const tableRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: false, striped: false }
	const columns = [
		{
			title: '序号',
			dataIndex: 'number',
			width: 50
		},
		{
			title: '文件名称',
			dataIndex: 'file_name',
			width: '200px',
			fixed: 'left',
			ellipsis: { showTitle: true }
		},
		{
			title: '创建人',
			dataIndex: 'user_name',
			width: '200px',
			fixed: 'left',
			ellipsis: { showTitle: true }
		},
		{
			title: '创建时间',
			dataIndex: 'date',
			width: 200
		},
		{
			title: '备注',
			dataIndex: 'remark',
			width: 200,
			ellipsis: {
				showTitle: true
			}
		},
		{
			title: '操作',
			dataIndex: 'action',
			fixed: 'right',
			align: 'center',
			width: '200px'
		}
	]
	let selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const total = ref(0)
	const loadData = (parameter) => {
		return api.modulePage().then((res) => {
			return {
				records: res
			}
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
	// 删除
	const deleteModule = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		api.moduleDelete(params).then(() => {
			tableRef.value.refresh(true)
		})
	}

	const updateValue = (record) => {
		api.submitForm({ id: record.id, number: record.number }, true).then(() => {
			tableRef.value.refresh()
		})
	}

	const userOptions = ref([])

	const downUrl = async (record) => {
		api.downFile({ fileName: record.fileUrl }).then((response) => {
			// 创建一个 Blob 对象
			const blob = new Blob([response.data], { type: response.headers['content-type'] })

			// 创建一个新的 a 元素，并设置它的 href 属性为 url，然后模拟点击这个 a 元素来下载文件
			let a = document.createElement('a')
			a.href = window.URL.createObjectURL(blob)
			a.download = record.file_name
			a.style.display = 'none'
			document.body.appendChild(a)
			a.click()
			document.body.removeChild(a)
		})
		/**
		const response = await axios({
			url: 'http://admin.moyuntuan.com:8081/static/uploadFile/2024/08/14/0438c607-b010-4317-9e23-58b71e503b40.txt', // 文件的 URL
			method: 'GET',
			responseType: 'blob' // 设置响应类型为 blob
		})

		// 创建一个 Blob 对象
		const blob = new Blob([response.data], { type: response.headers['content-type'] })

		// 创建一个新的 a 元素，并设置它的 href 属性为 url，然后模拟点击这个 a 元素来下载文件
		let a = document.createElement('a')
		a.href = window.URL.createObjectURL(blob)
		a.download = record.file_name
		a.style.display = 'none'
		document.body.appendChild(a)
		a.click()
		document.body.removeChild(a)
		 */
		// api.downFile({ fileName: record.fileUrl })
	}
	const openNew = (record) => {
		window.open(record.fileUrl, '_blank')
	}
</script>
